<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>灯光控制</title>
     <!-- 引入facicon.ico网页图标 -->
	<link rel="shortcut icon" href="../../favicon.ico"  type="image/x-icon"/>
	<link rel="stylesheet" href="../../layui/css/layui.css">
</head>
<body>
    <form class="layui-form" action="" style="margin-left: 300px;">
        <div class="layui-form-item">
         <label class="layui-form-label">开关</label>
         <div class="layui-input-block">
          <input id="btn" type="checkbox" checked="false" name="switch" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
         </div>
        </div>
    </form>
    <!-- ! 这里遇到了一个问题 ：
        !本来打算将开关即checkbox的状态和小灯同步：小灯亮CheckBox是选中的状态
        !此时灯光按钮将灯关闭 checkbox会自动跳到未选中
        !然而实践中发现 form 中的checkbox不能被外面的部件控制 想要实现上述的需要自己弄一个CheckBox
    -->
    <!-- <button  type="button"  onclick="light()" class="layui-btn layui-btn-radius layui-btn-warm">灯光</button> -->
      <!-- 用来测试 启用与禁用 
          <input type="button" name="status" id="btn" type="checkbox"  >
      <button onclick="light1()"name="status" >开会</button> -->
  <script src="../../layui/layui.all.js"></script>
  <script src="../../layui/jquery-1.8.3.min.js"></script>
  <script src="../../js/core.util.js"></script>
  <script src="../../js/ESP32/led.js"></script>
</body>
</html>